import {Directive, ElementRef, Input, OnInit} from '@angular/core';

@Directive({
  selector: '[appAutobg]'
})
export class AutobgDirective implements OnInit {
  @Input('appAutobg') url: string;
  @Input('pick') pick: boolean;

  constructor(private ref: ElementRef) { }

  ngOnInit() {
      if (this.pick) {
          this.ref.nativeElement.style.backgroundImage = 'url("' + this.url + '")';
          this.ref.nativeElement.style.backgroundPosition = 'center';
          this.ref.nativeElement.style.backgroundSize = '100% 100%';
          this.ref.nativeElement.style.backgroundRepeat = 'no-repeat';
      } else {
          this.ref.nativeElement.style.width = '100%';
          this.ref.nativeElement.style.paddingTop = '70%';
          this.ref.nativeElement.style.backgroundImage = 'url("' + this.url + '")';
          this.ref.nativeElement.style.backgroundPosition = 'center';
          this.ref.nativeElement.style.backgroundSize = '100% 100%';
          this.ref.nativeElement.style.backgroundRepeat = 'no-repeat';
      }

  }
}
